<template>
	<div id="app"> 
		<!--<div class="bg-xingzhuang"></div>-->
    <div class="over-hid pb40">
        <div class="yao-share m-center">           
        </div>
                      <!--腾讯摇一摇组件-->
        <wii-shake :conf="shake" :class="{hide:noTcomponent}"></wii-shake>
        <!-- 手机背景 -->
        <!--<div class="index-phone m-center mt20">
            <div class="red-ring" id="redRing"></div>
            <div class="hand-phone" :class="{handcircle:isHandcircle}"></div>
        </div> -->
        
        
        <!-- 含有毛玻璃效果的图片部分 -->
        <div class="index-car m-center mt20" :class="{hide:noAwareFinish}">
            <img class="index-car-img" src="../../../assets/images/tmp/red_car.png">
            <p class="p1">活动结束</p>
            <p class="p2" v-if="goOtherActive">去看看其他活动吧</p>
            <p class="p2" v-else>明天早点来哦~</p>
            <div class="red-ring"></div>
        </div> 
        <div class="mt40 index-btn-area" v-if="firstYaward" @click="gomyAward">
            <a class="btn fl" >活动说明</a>
            <a class="btn fl" >开始摇大奖</a>
        </div>
        <div class="mt40 index-btn-area" v-else-if="hasYaward" @click="goOver">
            <a class="btn fl" >我的奖品</a>
            <a class="btn fl" >开始摇大奖</a>
        </div>
        <div class="mt40 index-btn-area" v-else>
            <a class="btn fl" >我的奖品</a>
            <a class="btn fl" >活动说明</a>
        </div>
        
    </div>
    <div class="page-bottom">
        <div class="win-user g-sec2" id="J_Scroll">
        <ul id="J_ScrollTip1" class="g-sec2-tip1">
            <li class="u-user"> 138＊＊＊3156中5折起亚KX</li>
            <li class="u-user"> 138＊＊＊3156中6折起亚KX</li>
            <li class="u-user"> 138＊＊＊3156中7折起亚KX</li>
        </ul>
         <ul id="J_ScrollTip2" class="g-sec2-tip2">
        </ul>          
        </div>
        <!--<div class="wave"></div>-->
    </div>
    <a href="" class="index-act-des-a posi-rota15" v-if="hasYaward">活动说明</a>
    <!-- 首次进入报名弹层 -->
    <div class="pop-wrapper" :class="{hide:noApplicationLayer}">
        <div class="first-open">
        <div class="index-form-phone m-center"></div>
            <p class="first-open-title ">＊填写个人信息后开启摇一摇</p>
            <form id="J_SuccessForm" action="" method="post" class="mt30 m-center">  
                <div class="tc">
                    <label class="first-open-label ">姓名</label>
                    <input id="userName" name="userName" class="input1" type="text" v-model="userName">
                </div>
                <div class="tc mt40">
                    <label class="first-open-label">手机</label>
                    <input id="phone" name="phone" class="input1" type="text" v-model="userPhone">
                </div>
                <a class="btn m-center mt40 openBtn" id="submitBtn">确&nbsp;定</a>
            </form>
        </div>
  </div>
		  
		  
	</div>
</template>

<script>
	import 'assets/js/wii_entry';
	import 'assets/js/common';
	import 'assets/js/yaoyiyao';
//	import 'assets/js/share';
	import 'assets/js/mengban'
	export default {
  data() {
    return {
      isHandcircle:false,
      shake:{
        isShake: true,
        url: 'http://beta.yao.wii.qq.com/h5/act/draw',
        params:{
          act_id: '123567'
        },
        callback: function(res){
          console.log(res);
        }
      },
      noTcomponent:false,
      noApplicationLayer:false,    // 进去活动之前 填写信息弹层
      goOtherActive:false,        // 去看其他活动
      firstYaward:false,          // if 活动说明  & 开始摇大奖
      hasYaward:true ,     //同时也控制着 右上角活动说明有无  else-if 我的奖品 & 开始摇大奖         else 我的奖品 & 活动说明
      noAwareFinish:true,
      userName:'',
      userPhone:''
    }
  },
  created() {
    this.handYaoActive()
  },
  watch: {

  },
  computed: {
     
        
  },
   beforeMount: function() { 
   	
      
   },
  mounted() {
	 
      let redRing=$('.red-ring');
      let redRingAngle=0;
       setInterval(()=>{
        redRingAngle =redRingAngle+22.5;
        redRing.animate({'rotate': redRingAngle+'deg'}, 0);
    },300);

   var area = document.getElementById('J_Scroll');
   
    if (area != null) {
        var con1 = document.getElementById('J_ScrollTip1');
        var con2 = document.getElementById('J_ScrollTip2');
        var speed = 50;
        area.scrollTop = 0;
        if ($("#J_ScrollTip1").find("li").length >= 1) {
            con2.innerHTML = con1.innerHTML;
            area.style.height = "0.68rem";
            var myScroll = setInterval(()=>{
            	
            	 if (area.scrollTop >= con1.scrollHeight) {
            area.scrollTop = 0;
        } else {
            area.scrollTop++;
        }
            	
            }, speed);
        }
    };
    
     var feel = {
            NAMEERROR: "请输入正确的姓名",
            PHONEERROR: "请输入正确的手机号",
            ISNEWFIELD: '请输入正确的'
        };
     $('#submitBtn').bind("touchstart", function (event) {
            $("#J_SuccessForm").submit();
             
        });
        $("#J_SuccessForm").submit(function () {
            var userName = $("#userName").val();
            var phone = $("#phone").val();
            var newFieldVal = $('#NewField').val();
            var phoneReg = /^1[34578]\d{9}$/;
//          debugger
            if (userName.length <= 1 || GLOBAL.checkNull(userName)) {
            
                GLOBAL.pop(feel.NAMEERROR);
                	
                return false;
            }
            if (GLOBAL.checkNull(phone) || !phoneReg.test(phone)) {
                GLOBAL.pop(feel.PHONEERROR);
                return false;
            }
            this.noApplicationLayer = true ;
            console.log(this.noApplicationLayer)
//          if (!newFieldVal && $CONFIG.newField.isNewFieldVerify) {
//              GLOBAL.pop(feel.ISNEWFIELD + $("#new_field_name").text());
//              return false;
//          }

//           callSubmit ()    //调取接口的方法
//          $.ajax({
//              url: '/h5/act/apply_submit',
//              type: 'post',
//              dataType: 'json',
//              data: {
//                  act_id: actId,
//                  user_name: userName,
//                  phone: phone,
//                  new_field: newFieldVal
//              },
//              success: function (data) {
//                  // ajax 成功
//                  if (data.ret !== 0) {
//                      GLOBAL.pop('提交信息失败！');
//                      return;
//                  }
//                  setTimeout(function () {
//                      window.location.href = "/h5/act/yao?act_id=<?php echo $actClient->FId; ?>";
//                  }, 500);
//              },
//              error: function () {
//                  GLOBAL.pop('提交信息失败！');
//              }
//          });

//          return false;
        })
  },
  methods: {
	handYaoActive(){     // 摇动的函数
		setTimeout(()=>{
			setInterval(()=>{
				this.isHandcircle ? this.isHandcircle = false : this.isHandcircle = true;
			},600)
		},200)
  },
   checkUser() {  //校验用户信息
	  this.noTcomponent=false,
      this.noApplicationLayer=true,    // 进去活动之前 填写信息弹层
      this.goOtherActive=false,        // 去看其他活动
      this.firstYaward=true,          // if 活动说明  & 开始摇大奖
      this.hasYaward=false ,     //同时也控制着 右上角活动说明有无  else-if 我的奖品 & 开始摇大奖         else 我的奖品 & 活动说明
      this.noAwareFinish=true
   },
   gomyAward() {
   	   this.noTcomponent=false,
      this.noApplicationLayer=true,    // 进去活动之前 填写信息弹层
      this.goOtherActive=false,        // 去看其他活动
      this.firstYaward=false,          // if 活动说明  & 开始摇大奖
      this.hasYaward=true ,     //同时也控制着 右上角活动说明有无  else-if 我的奖品 & 开始摇大奖         else 我的奖品 & 活动说明
      this.noAwareFinish=true
   },
    goOver() {
   	   this.noTcomponent=true,
      this.noApplicationLayer=true,    // 进去活动之前 填写信息弹层
      this.goOtherActive=false,        // 去看其他活动
      this.firstYaward=false,          // if 活动说明  & 开始摇大奖
      this.hasYaward=false ,     //同时也控制着 右上角活动说明有无  else-if 我的奖品 & 开始摇大奖         else 我的奖品 & 活动说明
      this.noAwareFinish=false
   },
   callSubmit () {
   	   debugger
   	  console.log(123)
   }
 }
}

</script>

<style lang="less">
	@import "../../../assets/css/main.css";

</style>